<template>
    <div class="singer-song">

        <!-- 歌单列表 -->
        <div class="list">
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
                <div v-for="(item,index) in list" :key="index" >
                    <h4>{{ item.name  }}</h4>
                    <div class="singers">
                        <span v-for="(singer,index) in item.singer" :key="singer.id">
                            {{ singer.name }}
                            <span v-show="index != item.singer.length-1">/</span>
                        </span>

                        <span v-show="item.title">
                            <span style="color:orangered; padding: 0 0.3rem;font-size: 1.2rem;">·</span>
                            <span>{{ item.title }}</span>
                        </span>

                        <span v-show="item.subtitle">
                            <span style="color:orangered; padding: 0 0.3rem;font-size: 1.2rem;">·</span>
                            <span>{{ item.subtitle }}</span>
                        </span>
                        
                    </div>
                </div>
            </van-list>
            
        </div>
    </div>
    
</template>
<script>
export default {
    props:["singerId"],
    created(){
       this.getData(this.singerId,1,10)
    },

    data(){
        return{
            // song: {
            //     name: "",   //作者
            //     title: "",       //歌曲
            //     headurl: "",    //制作者头像
            //     nickname: "",  //制作者昵称
            //     visitnum: 0,  //歌曲播放量
            // },
            list:[],  //vant的list列表数据
            loading:false,
            finished:false,
            page:1,    //获取api数据页码
        };
    },

    methods:{
        getData(){
            this.$request(
                'get',
                '/singer/songs?singermid=' + this.singerId + "&page="+this.page+"&num=30")
            .then(
                (res) => {
                    console.log(res)
                    //res.data.list中是分页获取的数据，30个，把这个数据添加到vant的list列表数据中
                    this.list = this.list.concat(res.data.list);
                    //加载状态结束
                    this.loading = false;
                    //页码自动+1
                    this.page++;
                    //数据全部加载完成
                    if(res.data.list.length == 0){
                        this.finished = true;
                    }
                    
                });
        },
        onLoad(){
            setTimeout(() => {
                this.getData(); // 调用获取分页数据的方法
                this.loading = true;  //正在加载
            }, 1000);
        }
    }
}

</script>
<style scoped>
/* 列表样式 */
.list{
    margin: 0 1rem;
}
.list h4{
    text-align: left;
    font-size: 1rem;
}
.singers{
    text-align: left;
}
.singers span{
    font-size: 0.8rem;
    color: rgb(160,160,190);
}
.singers>span:ntn-last-child(1)>span:nth-child(1){
    color: red;
    font-weight: 900;
    padding: 0 0.5rem;
}
</style>